import React, { ReactNode, useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'

interface IDrawerProps {
    name: string
    expend?: boolean
    onClose?: () => void
    children?: ReactNode
}

export interface IHasDrawerMethods {
    open: () => void
    close: () => void
}

export default function Drawer(props: IDrawerProps) {
    const [slideWidth, setSlideWidth] = useState(700)

    useEffect(() => {
        setSlideWidth($(`#${props.name} > .${style.drawer__wrap}`).outerWidth() || 700)
    }, [])

    return (
        <div
            id={props.name}
            key={props.name}
            className={`${style.drawer} ${props.expend ? 'active' : ''}`}
            onClick={() => {
                if (props.onClose) props.onClose()
            }}>
            <div
                onClick={e => e.stopPropagation()}
                className={style.drawer__wrap}
                style={{
                    ['--container-width' as any]: slideWidth
                }}>
                {props.children}
            </div>
        </div>
    )
}
